<!--
 * @Autor: dingxiaolin
 * @Date: 2021-01-08 17:31:43
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-02-01 11:22:06
-->
<template>
    <div class="common-container">
        <h1 class="title">{{ title }}<slot ></slot></h1>
        <div class="content">{{ content }}</div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class TopPanel extends Vue {
    @Prop()
    public title: string;
    @Prop()
    public content: string;
    @Prop({ default: 'grey' })
    public color1: string;
    @Prop({ default: 'grey' })
    public color2: string;
    @Prop()
    public yulin: string;
    @Prop()
    public hexiao: string;
}
</script>

<style lang="scss" scoped>
.common-container {
    background: #ffffff;
    box-shadow: 0 1px 4px 0 rgba(3, 44, 77, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 24px;
    .title {
        font-size: 20px;
        margin: 0 0 10px 0;
    }
    .content {
        color: rgba(0, 0, 0, 0.5);
        font-size: 14px;
    }
}
</style>
